<template>
  <div id="subpage" v-loading="loading">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>首页</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>组织简介</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <span class="title">组织简介</span>
      </div>
      <div class="xcx-content">
        <el-form ref="form_data" :model="form_data" :rules="rules" label-width="160px" style="width: 80%">
          <el-form-item label="现任领导：" prop="site_title">
            <el-input v-model="form_data.site_title" placeholder="请输入站点标题"></el-input>
          </el-form-item>
          <el-form-item label="领导头像：" prop="site_logo" class="txt_left kind_img">
            <upload-one w="100px" h="100px" v-model="form_data.site_logo"></upload-one>
            <div style="font-size: 12px; color: #606266">
              为1:1比例图片 （不小于140 x 140px）
            </div>
          </el-form-item>
          <el-form-item label="所获荣誉：" prop="site_copyright">
            <el-input type="textarea" :rows="4" v-model="form_data.site_copyright"
              placeholder="请输入所获荣誉（一行一个）"></el-input>
          </el-form-item>
          <el-form-item label="基本介绍：" prop="agreement">
            <vue-ueditor-wrap v-model="form_data.agreement" :config="config" ref="ueditor"></vue-ueditor-wrap>
          </el-form-item>
          <el-form-item class="mar_T_50">
            <el-button style="width: 120px;" icon="el-icon-thumb" type="primary" @click="submitForm()">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import UploadOne from "../../components/upload/UploadOne";
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    UploadOne,
  },
  data() {
    return {
      loading: true,
      upload_img_url: this.adminApi.upload_url,
      form_data: {
        id: 2,
        site_title: "",
        site_icp: "",
        site_logo: "",
        site_open: "",
        agreement: "",
        site_mobile: "",
        site_address: "",
        site_email: "",
        id: 0,
      },
      upload_img_url: this.adminApi.upload_url,
      config: {
        // 相对路径
        UEDITOR_HOME_URL: "/web_admin/UEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度// 初始容器宽度
        initialFrameHeight: 300,
        initialFrameWidth: "99%",
        // 不显示字数
        // wordCount: false,
        enableAutoSave: true, //自动保存
      },
      id: "",
      rules: {
        site_title: [{ required: true, message: "请输入网站标题", trigger: "blur" }],
        site_icp: [
          { required: true, message: "请输入ICP备案号", trigger: "blur" },
        ],
        agreement: [
          { required: true, message: "请输入隐私协议", trigger: "blur" },
        ],
        site_logo: [
          { required: true, message: "请输入上传logo", trigger: "blur" },
        ],
        site_open: [
          { required: true, message: "请上传开屏图", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    var that = this;
    that.getDetail();
  },
  methods: {
    /**
     * 获取详情
     */
    getDetail() {
      var that = this;
      that.axios.post("/config/site", {
        id: 2
      }).then((res) => {
        if (res) {
          if (res.data) {
            that.form_data = res.data;
          }
          that.loading = false;
        }
      });
    },

    submitForm() {
      const that = this;
      that.$refs.form_data.validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.form_data;
        var url = "/config/siteupdate";
        that.axios.post(url, formData).then(() => {
          that.$message.success(that.form_data.id ? "修改成功" : "添加成功");
          that.getDetail();
        });
      });
    },

  },
};
</script>
<style>
.edui-default {
  line-height: 20px;
}
</style>